import { FC, useEffect, useState } from "react";
// import { ipcRenderer } from "electron";
import { Button, Avatar, Space, Popover } from "antd";
import { useSelector } from "react-redux";
import {
  AudioOutlined,
  FileImageOutlined,
  FolderOutlined,
  HistoryOutlined,
  RedEnvelopeOutlined,
  ScissorOutlined,
  ShakeOutlined,
  SmileOutlined,
  UserOutlined
} from "@ant-design/icons";
import "./index.scss";
import { getMessageHistoryList } from "@renderer/api";
import { getChatList } from "@renderer/api";
import { EmojiPopup } from "@renderer/components/Emoji";

type PropType = {};
const Message: FC<PropType> = (props): JSX.Element => {
  const {} = props;
  const { activeFrendId } = useSelector((state: any) => state.frend);
  const [item, setItem] = useState([]);
  const [msgDataList, setMsgDataList] = useState([]);
  useEffect(() => {
    const result = getChatList();
    const my = result.find((x) => x.chatId === "1");
    const frend = result.find((x) => x.chatId === activeFrendId);
    setItem(frend);
    const result1 = getMessageHistoryList(activeFrendId);
    const arr: any = [];
    result1.forEach((element) => {
      if (element.sendId === my?.chatId) {
        if (element.toId === activeFrendId) {
          arr.push({
            ...element,
            chatName: my?.chatName,
            avatar: my?.avatar
          });
        }
      } else if (element.sendId === activeFrendId) {
        arr.push({
          ...element,
          chatName: frend?.chatName,
          avatar: frend?.avatar
        });
      }
    });
    setMsgDataList(arr);
  }, [activeFrendId]);

  // const handleEmojiClick = (content) => {
  //   console.log("选择的表情", content);
  // };
  // const selectImageMessage = () => {
  //   console.log("选择图片");
  //   ipcRenderer.send("SELECT_FILES", {
  //     type: "SELECT_FILES",
  //     params: {
  //       fileType: "image",
  //       extensions: ["png", "jpg", "gif", "PNG", "JPG", "GIF"],
  //       multiSelections: false
  //     }
  //   });
  // };
  // const selectFileMessage = () => {
  //   console.log("选择文件");
  //   ipcRenderer.send("SELECT_FILES", {
  //     type: "SELECT_FILES",
  //     params: {
  //       fileType: "file",
  //       extensions: ["*"],
  //       multiSelections: false
  //     }
  //   });
  // };
  return (
    <div className="frend-message">
      <div className="title-bar">
        <div className="title">{item.chatName}</div>
      </div>
      <div className="message-list">
        {msgDataList.map((element) => {
          const { id, sendId, toId, msg, chatName } = element;
          if (sendId === activeFrendId) {
            return (
              <div key={id} className="item item--left">
                <div className="avatar">
                  <Avatar size={32}>{chatName.charAt(0)}</Avatar>
                  {/* <Avatar size={32} icon={<UserOutlined />} /> */}
                </div>
                <div className="msg">{msg}</div>
              </div>
            );
          } else {
            return (
              <div key={id} className="item item--right">
                <div className="avatar">
                  <Avatar size={32}>{chatName.charAt(0)}</Avatar>
                  {/* <Avatar size={32} icon={<UserOutlined />} /> */}
                </div>
                <div className="msg">{msg}</div>
              </div>
            );
          }
        })}
      </div>
      <div className="message-send">
        <div className="toolbar">
          <div className="--left">
            <Space>
              {/* callback={handleEmojiClick} */}
              {/* <Popover content={<EmojiPopup></EmojiPopup>} trigger="click">
                <Button className="btn" type="text" size="small">
                  <SmileOutlined style={{ fontSize: "22px" }} />
                </Button>
              </Popover> */}

              <Button className="btn" type="text" size="small">
                <ScissorOutlined style={{ fontSize: "22px" }} />
              </Button>
              {/* <Button className="btn" type="text" size="small" onClick={selectFileMessage}>
                <FolderOutlined style={{ fontSize: "22px" }} />
              </Button>
              <Button className="btn" type="text" size="small" onClick={selectImageMessage}>
                <FileImageOutlined style={{ fontSize: "22px" }} />
              </Button> */}
              <Button className="btn" type="text" size="small">
                <ShakeOutlined style={{ fontSize: "22px" }} />
              </Button>
              <Button className="btn" type="text" size="small">
                <RedEnvelopeOutlined style={{ fontSize: "22px" }} />
              </Button>
              <Button className="btn" type="text" size="small">
                <AudioOutlined style={{ fontSize: "22px" }} />
              </Button>
            </Space>
          </div>
          <div className="--right">
            <Space>
              <Button className="btn" type="text" size="small">
                <HistoryOutlined style={{ fontSize: "22px" }} />
              </Button>
            </Space>
          </div>
        </div>
        <div className="content" contentEditable={true}></div>
        <div className="actionbar">
          <Button type="primary">发送</Button>
        </div>
      </div>
    </div>
  );
};

export default Message;
